@-webkit-keyframes aniFadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
    }
}

@keyframes aniFadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}


.ani-fade-in-up{
    animation: aniFadeInUp 2s ease-out 1;
}
@-webkit-keyframes aniFadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
    }
}

@keyframes aniFadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@-webkit-keyframes aniFadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
    }
}

@keyframes aniFadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes aniFadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
    }
}

@keyframes aniFadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes aniFadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
    }
}

@keyframes aniFadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }
}
@-webkit-keyframes aniFadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
    }
}

@keyframes aniFadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }
}
@-webkit-keyframes aniFadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
    }
}

@keyframes aniFadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }
}

.ani-shake-up>*{
    animation-fill-mode: backwards;
    animation: aniShakeUp 20s ease-out infinite;
}

@keyframes aniShakeUp {
    0%, 100% {
        transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateY(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateY(10px);
    }
}

/*鼠标覆盖时3d翻转*/
.ani-flip-3d-hover{
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
.ani-flip-3d-hover:hover>*{
    animation: aniFlipH 0.8s ease-out 1;
}

/*水平翻转360度*/
@keyframes aniFlipH {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/*垂直翻转360度*/
@keyframes aniFlipV {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

.ani-img3d .ani-img3d-item {
    display:inline-block;
    transform-origin: 50% 50% 0;
    transform: perspective(500px) rotateY(3.49295deg) rotateX(-3.24902deg);
    transition: transform 0.5s ease-out;
}

/*简单旋转飞舞效果*/
@-webkit-keyframes aniFly {
    0% {
        -webkit-transform: translate(0px,0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(13px,-1px) rotate(36deg);
    }

    40% {
        -webkit-transform: translate(53px,22px) rotate(72deg);
    }

    60% {
        -webkit-transform: translate(33px,85px) rotate(108deg);
    }

    80% {
        -webkit-transform: translate(-10px,42px) rotate(144deg);
    }

    100% {
        -webkit-transform: translate(0px,0px) rotate(0deg);
    }
}
@keyframes aniFly {
    0% {
        transform: translate(0px,0px) rotate(0deg)
    }

    20% {
        transform: translate(13px,-1px) rotate(36deg)
    }

    40% {
        transform: translate(53px,22px) rotate(72deg)
    }

    60% {
        transform: translate(33px,85px) rotate(108deg)
    }

    80% {
        transform: translate(-10px,42px) rotate(144deg)
    }

    100% {
        transform: translate(0px,0px) rotate(0deg)
    }
}

/*box over style*/
.ani-box-over-light-white {
    position: relative;
    display:inline-block;
}

.ani-box-over-light-white:before {
    display: block;
    position: absolute;
    -webkit-transition: all 0.1s ease-in 0.1s;
    transition: all 0.1s ease-in 0.1s;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 50%;
}

.ani-box-over-light-white:hover:before {
    opacity: 0.2;
    filter: alpha(opacity=0.2);
    -webkit-transition: all 0.2s ease-in 0.1s;
    transition: all 0.2s ease-in 0.1s;
    height: 100%;
    left: 0;
    top: 0;
}
.ani-box-over-light-black {
    position: relative;
    display:inline-block;
}

.ani-box-over-light-black:before {
    display: block;
    position: absolute;
    -webkit-transition: all 0.1s ease-in 0.1s;
    transition: all 0.1s ease-in 0.1s;
    background: #000;
    opacity: 0;
    filter: alpha(opacity=0);
    content: "";
    height: 0;
    width: 100%;
    left: 0;
    top: 50%;
}

.ani-box-over-light-black:hover:before {
    opacity: 0.2;
    filter: alpha(opacity=0.2);
    -webkit-transition: all 0.2s ease-in 0.1s;
    transition: all 0.2s ease-in 0.1s;
    height: 100%;
    left: 0;
    top: 0;
}

.ani-box-over-flash-white{
    display:inline-block;
    position: relative;
    overflow:hidden;
}

.ani-box-over-flash-white:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity:0.15;
    content: '';
    -webkit-transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,300%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,135deg) translate3d(0,300%,0);
}

.ani-box-over-flash-white:hover:before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-300%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,135deg) translate3d(0,-300%,0);
}


.ani-box-over-flash-black{
    display:inline-block;
    position: relative;
    overflow:hidden;
}

.ani-box-over-flash-black:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity:0.15;
    content: '';
    -webkit-transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,300%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,135deg) translate3d(0,300%,0);
}

.ani-box-over-flash-black:hover:before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-300%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,135deg) translate3d(0,-300%,0);
}


.ani-box-over-line-white{
    position: relative;
    display: inline-block;
}

.ani-box-over-line-white:before{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity:0;
}

.ani-box-over-line-white:after{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    transform: scaleY(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity:0;
}

.ani-box-over-line-white:hover:before,.ani-box-over-line-white:hover:after {
    transform: scale(1);
    opacity:0.9;
}

.ani-box-over-line-black{
    position: relative;
    display: inline-block;
}

.ani-box-over-line-black:before{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    border-top: 1px solid rgba(0,0,0, 0.6);
    border-bottom: 1px solid rgba(0,0,0, 0.6);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity:0;
}

.ani-box-over-line-black:after{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    border-left: 1px solid rgba(0,0,0, 0.6);
    border-right: 1px solid rgba(0,0,0, 0.6);
    transform: scaleY(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity:0;
}

.ani-box-over-line-black:hover:before,.ani-box-over-line-black:hover:after {
    transform: scale(1);
    opacity:0.9;
}
.ani-box-over-line-primary{
    position: relative;
    display: inline-block;
}

.ani-box-over-line-primary:before{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity:0;
}

.ani-box-over-line-primary:after{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    z-index: 9;
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
    transform: scaleY(0);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity:0;
}

.ani-box-over-line-primary:hover:before,.ani-box-over-line-primary:hover:after {
    transform: scale(1);
    opacity:0.9;
}
.ani-box-over-mask-white{
    position: relative;
    display:inline-block;
}

.ani-box-over-mask-white:after {
    overflow: hidden;
    position: absolute;
    content: "";
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 1;
}

.ani-box-over-mask-white:hover:after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.ani-box-over-mask-white-zoomin{
    position: relative;
    display: inline-block;
    z-index: 1;
}

.ani-box-over-mask-white-zoomin:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(255,255,255, 0.3);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 2;
    cursor:pointer;
}

.ani-box-over-mask-white-zoomin:before {
    content:' ';
    background: url("data:image/svg+xml;utf8,%3Csvg viewBox%3D'0 0 1024 1024' version='1.1' xmlns='http%3A//www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z' data-spm-anchor-id='a313x.7781069.0.i1' fill='%23ffffff'%3E%3C/path%3E%3Cpath d='M597.333333 437.333333h-96V341.333333c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h96V597.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-96H597.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z' data-spm-anchor-id='a313x.7781069.0.i2' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0;
    background-size:cover;
    width:24px;
    height:24px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    pointer-events: none;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
    cursor:pointer;
}

.ani-box-over-mask-white-zoomin:hover:after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.ani-box-over-mask-white-zoomin:hover:before {
    opacity: 1;
}
.ani-box-over-mask-white-text{
    position: relative;
    display:inline-block;
}

.ani-box-over-mask-white-text:after {
    overflow: hidden;
    position: absolute;
    content: "";
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 1;
}

.ani-box-over-mask-white-text:before {
    content: var(--content-text);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    color: #fff;
    pointer-events: none;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    transition: opacity 0.5s ease 0s;
}

.ani-box-over-mask-white-text:hover:after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.ani-box-over-mask-white-text:hover:before {
    opacity: 1;
}
.ani-box-over-mask-black{
    position: relative;
    display: inline-block;
}

.ani-box-over-mask-black:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 1;
}

.ani-box-over-mask-black:hover:after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.ani-box-over-mask-black-zoomin{
    position: relative;
    display: inline-block;
    z-index: 1;
}

.ani-box-over-mask-black-zoomin:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 2;
    cursor:pointer;
}

.ani-box-over-mask-black-zoomin:before {
    content:' ';
    background: url("data:image/svg+xml;utf8,%3Csvg viewBox%3D'0 0 1024 1024' version='1.1' xmlns='http%3A//www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z' data-spm-anchor-id='a313x.7781069.0.i1' fill='%23ffffff'%3E%3C/path%3E%3Cpath d='M597.333333 437.333333h-96V341.333333c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h96V597.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-96H597.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z' data-spm-anchor-id='a313x.7781069.0.i2' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0;
    background-size:cover;
    width:24px;
    height:24px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    pointer-events: none;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
    cursor:pointer;
}

.ani-box-over-mask-black-zoomin:hover:after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.ani-box-over-mask-black-zoomin:hover:before {
    opacity: 1;
}
.ani-box-over-mask-black-text{
    position: relative;
    display:inline-block;
}

.ani-box-over-mask-black-text:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    z-index: 1;
}

.ani-box-over-mask-black-text:before {
    content: var(--content-text);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    color: #fff;
    pointer-events: none;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    transition: opacity 0.5s ease 0s;
}

.ani-box-over-mask-black-text:hover:after {
    visibility: visible;
    opacity: 0.8;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.ani-box-over-mask-black-text:hover:before {
    opacity: 1;
}

.ani-box-over-mask-black-top-bottom{
    position: relative;
    display: inline-block;
}

.ani-box-over-mask-black-top-bottom:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
    opacity: 0.2;
    pointer-events: none;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.ani-box-over-mask-black-top-bottom:hover:after {
    height:100%;
    opacity: 0.8;
}

.ani-box-over-mask-black-bottom-top{
    position: relative;
    display: inline-block;
}

.ani-box-over-mask-black-bottom-top:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    opacity: 0.2;
    pointer-events: none;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.ani-box-over-mask-black-bottom-top:hover:after {
    height:100%;
    opacity: 0.8;
}

.ani-box-over-mask-black-left-right{
    position: relative;
    display: inline-block;
}

.ani-box-over-mask-black-left-right:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.2;
    pointer-events: none;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.ani-box-over-mask-black-left-right:hover:after {
    width:100%;
    opacity: 0.8;
}

.ani-box-over-mask-black-right-left{
    position: relative;
    display: inline-block;
}

.ani-box-over-mask-black-right-left:after {
    overflow: hidden;
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    right: 0;
    top: 0;
    opacity: 0.2;
    pointer-events: none;
    transition: all 0.3s ease 0s;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.ani-box-over-mask-black-right-left:hover:after {
    width:100%;
    opacity: 0.8;
}